<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Aloha editable impress.js | presentation tool based on the power of CSS3 transforms and transitions in modern browsers </title>
    
    <meta name="description" content="impress.js is a presentation tool based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com. It's using Aloha Editor to make the content inline editable.">
    <meta name="author" content="Bartek Szopka" />

    <link href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic" rel="stylesheet" />

    <link href="css/impress-demo.css" rel="stylesheet" />

	<!-- add aloha -->
	<link rel="stylesheet" href="../../css/aloha.css" type="text/css" />
	<script src="js/aloha-config.js"></script>
	<script src="../../lib/require.js"></script>
	<script src="../../lib/vendor/jquery-1.7.2.js"></script>
	<script src="../../lib/aloha.js"
	        data-aloha-plugins="common/ui,
	                            common/format,
	                            common/table,
	                            common/list,
	                            common/link,
	                            common/highlighteditables,
	                            common/block,
	                            common/undo,
	                            common/contenthandler,
	                            common/paste,
	                            common/commands"></script>

</head>
<body>

<div id="impress" class="impress-not-supported">

    <div class="fallback-message">
        <p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
        <p>For the best experience please use the latest <b>Chrome</b> or <b>Safari</b> browser. Firefox 10 (to be released soon) will also handle it.</p>
    </div>

    <div id="aloha-editable-impress" class="step slide" data-x="-1000" data-y="-1500">
        <q>Aren't you just <b>bored</b> with all those WYSIWYG editors?</q>
        <p>You like <b>impress.js / jmpress.js</b>?</p>
        <p>You would love to have an easy way to <b>edit</b> this slides?</p>

		<q>Just click and edit!</q>
    </div>

    <div id="aloha-editor" class="step slide" data-x="0" data-y="-1500">

		        <q>Aloha Editor - HTML5 inline Editor</q>
				<a href="http://www.aloha-editor.org/">
				<img src="http://aloha-editor.org/logo/Aloha Editor HTML5 contenteditable transparent 256.png" width="256" height="128" alt="Content editing powered with Aloha Editor using HTML5contenteditable." title="Content editing powered with Aloha Editor useing HTML5contenteditable.">
				</a>

<p>&nbsp;</p>

		<p>The world's most advanced browser HTML5 based WYSIWYG editor lets you experience a whole new way of editing. It's faster than existing technologies and offers unprecedented WYSIWYG functionalities. <br /><br />Visit: <a href="http://www.aloha-editor.org/">Aloha-Editor.org</a> for more information</p>

<p></p>
    </div>

    <div id="impress-fast-money" class="step slide" data-x="1000" data-y="-1500">
        <q><strong>impress your audience</strong> with <strong>stunning visualization</strong>. <strong>save time &amp; money</strong> with <strong>advanced web editing</strong>.</q>
<p><br /><small><i>howto:</i> <strong>click</strong> on text you want </strong>to edit</strong>. <strong>click</strong> outside the editable area to deactivate the edit mode and <strong>use the keybord navigation</strong> to switch slides.<br /><br /><i>known issue</i> in this version: the cursor does not always move correctly -- but you can edit where you click.</small></p>
    </div>

    <div id="title" class="step" data-x="0" data-y="0" data-scale="3">
        <span class="try">you should try </span>
        <h1>Aloha <sup>*</sup></h1>
        <span class="footnote"><sup>*</sup> just click to edit.</span>
    </div>

    <div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">
        <p>It's a <strong>presentation tool</strong> <br/>
        inspired by the idea behind <a href="http://prezi.com">prezi.com</a> <br/>
        and based on the <strong>power of CSS3 transforms and transitions</strong> in modern browsers.</p>
    </div>

    <div id="big" class="step" data-x="3500" data-y="2100" data-rotate="180" data-scale="6">
        <p>visualize your <b>big</b> <span class="thoughts">thoughts</span></p>
    </div>

    <div id="tiny" class="step" data-x="2825" data-y="2325" data-z="-3000" data-rotate="300" data-scale="1">
        <p>and <b>tiny</b> ideas.</p>
        <p><b>edit everywhere!</b></p>
    </div>

    <div id="ing" class="step" data-x="3500" data-y="-850" data-rotate="270" data-scale="6">
        <p>by <b class="positioning">positioning</b>, <b class="rotating">rotating</b> and <b class="scaling">scaling</b> them on an infinite canvas</p>
    </div>

    <div id="imagination" class="step" data-x="6700" data-y="-300" data-scale="6">
        <p>the only <b>limit</b> is your <b class="imagination">imagination</b></p>
    </div>

    <div id="source" class="step" data-x="6300" data-y="2000" data-rotate="20" data-scale="4">
        <p>want to know more?</p>
        <q><a href="https://github.com/evo42/Aloha-Editor/tree/dev/src/demo/impress.js">fork me</a> on github!</q>
    </div>

    <div id="one-more-thing" class="step" data-x="6000" data-y="4000" data-scale="2">
        <p>one more thing...</p>
    </div>

    <div id="its-in-3d" class="step" data-x="6200" data-y="4300" data-z="-100" data-rotate-x="-40" data-rotate-y="10" data-scale="2">
        <p><span class="have">have</span> <span class="you">you</span> <span class="noticed">noticed</span> <span class="its">it's</span> <span class="in">in</span> <b>3D<sup>*</sup></b>?</p>
        <span class="footnote">* beat that, prezi ;)</span>
    </div>

    <div id="overview" class="step" data-x="3000" data-y="1500" data-scale="10">
    </div>

</div>

<div class="hint">
    <p>Use a spacebar or arrow keys to navigate</p>
</div>

<script src="js/app.js"></script>
<script src="js/impress.js"></script>


</body>
</html>
